<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xhDuH5BvfrENw45kGu5OdUD4w3G1e5v3"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<title>地图</title>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
	//百度地图API功能

	function loadJScript() {
		var script = document.createElement("script");
		script.type = "text/javascript";
		script.src = "https://api.map.baidu.com/api?v=2.0&ak=xhDuH5BvfrENw45kGu5OdUD4w3G1e5v3&callback=init";
		document.body.appendChild(script);
	}
	function init() {
		var map = new BMap.Map("allmap",{enableMapClick:false});            // 创建Map实例
		var point = new BMap.Point("${longitude}","${latitude}"); // 创建点坐标

		var lng="${longitude}";
		var lat="${latitude}";
		//设施描述
		var facDesc="${facDesc}";
		//设施ID
		var facId = "${facId}";

		//用于存放maker的数组
		var markers = new Array();

		map.centerAndZoom(point,19);
		map.enableScrollWheelZoom();//启用滚轮放大缩小
		var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
		map.addControl(top_left_control);

		var opts = {
			width : 250,     // 信息窗口宽度
			height: 150,     // 信息窗口高度
			title : "详细信息" , // 信息窗口标题
			enableMessage:true//设置允许信息窗发送短息
		};

		<c:forEach var="it" items="${showlist}" varStatus="index">


		var p = new BMap.Point("${it.facLon}", "${it.facLat}");
		var marker = new BMap.Marker(p);
		//map.addOverlay(marker);

		//区分正常和异常状态
		var devStu ="${it.eventDevstu}";
		var doorStu ="${it.eventDoorstu}";
		var errorStu ="";
		var stuDesc="";
		if(doorStu=='0'||devStu=='0'){
			errorStu ="0";
			stuDesc="异常";
			var icon =new BMap.Icon("${basePath}assets/i/map-red.png",new BMap.Size(28,28));
			marker.setIcon(icon);
		}else{
			errorStu ="1";
			stuDesc="正常";
			var icon =new BMap.Icon("${basePath}assets/i/map-green.png",new BMap.Size(29,29));
			marker.setIcon(icon);
		}



		if(facId=="${it.facId}"){
			var icon =new BMap.Icon("${basePath}assets/i/map-blue.png",new BMap.Size(30,30));
			marker.setIcon(icon);
			marker.setTop(true);
		}

		//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
		var content = "设施："+"${it.facDesc}"+"<br>"+"负责人："+"${it.realName}"+"<br>"+"手机号码："+"${it.phonenumber}"+"<br>"+"设备编号："+"${it.devCode}"+"<br>"+"状态："+stuDesc;
		//var content = "${it.facDesc}";
		addClickHandler(content,marker,opts,map);

		//为每一个marker设置好属性之后存放入数组，用于后边的点聚合
		markers.push(marker);

		</c:forEach>

		//生成一个marker数组，然后调用markerClusterer类即可。
		var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});


		//调用获取显示相同坐标设施 数量;
		showNum(map);

	}

	function addClickHandler(content,marker,opts,map){
		marker.addEventListener("click",function(e){
			openInfo(content,opts,map,e)}
		);
	}
	function openInfo(content,opts,map,e){
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}

	window.onload = loadJScript;  //异步加载地图

	//用于在地图上显示某个地图坐标上安装了多少个设备。
	function showNum(map){
		$.ajax({
			type:"post",
			dataType:"json",
			cache:false,
			data:"",
			url:"${basePath}ajaxgetsamefacaddress.do",
			success:function(data){
				for(var index =0;index<data.length;index++){


					var lng = data[index].id.facLon;
					var lat = data[index].id.facLat;
					var num = data[index].id.num;

					if(num>1){
						//alert(lng);

						var point = new BMap.Point(lng,lat);
						var opts = {
							position : point,    // 指定文本标注所在的地理位置
							offset   : new BMap.Size(10, -35)    //设置文本偏移量

						}
						var str = num;
						var label = new BMap.Label(str, opts);  // 创建文本标注对象
						label.setStyle({
							color:"red",
							fontSize : "13px",
							height : "21px",
							lineHeight : "21px",
							fontFamily:"微软雅黑",
							backgroundColor: "0.05",
							border:"0",
							fontWeight:"bolder"
						});
						map.addOverlay(label);
					}


				}
			}

		});
	}
</script>
</body>
</html>

